<template>
	<div>
		<el-carousel trigger="click" height="600px">
			<el-carousel-item v-for="item in imgArray" :key="item">
				<img :src="item" class="rightImg">
			</el-carousel-item>
		</el-carousel>
		<div class="tuijian">
			<el-row :gutter="20" style="margin-top: 10px;background-color: #ffffff;">
				<el-col :span="6">
					<div>
						<a href="https://www.sydianlan.net/"><img class="indexImg" src="@/assets/index/ad01.jpg"
								alt=""></a>
					</div>
				</el-col>
				<el-col :span="6">
					<div>
						<a href="https://www.sydianlan.net/"><img class="indexImg" src="@/assets/index/ad02.jpg"
								alt=""></a>
					</div>
				</el-col>
				<el-col :span="6">
					<div>
						<a href="https://www.sydianlan.net/"><img class="indexImg" src="@/assets/index/ad03.jpg"
								alt=""></a>
					</div>
				</el-col>
				<el-col :span="6">
					<div>
						<a href="https://www.sydianlan.net/"><img class="indexImg" src="@/assets/index/ad04.jpg"
								alt=""></a>
					</div>
				</el-col>
			</el-row>
		</div>

		<div class="common" style="height: 440px;">
			<h3>降价促销</h3>
			<el-row :gutter="20" style="height: 400px;">
				<el-col :span="6" v-for="item in hotEquipmentsList1">
					<div class="imgsize" @click="imgToEquipmentsDetails(item.imageUrl)">
						<img v-if="item.imageUrl" class="indexImg" v-model="item.imageUrl"
							:src="require('@/assets/equipments/'+item.imageUrl)">
					</div>
					<div class="brief">
						<span class="goods_name" @click="toEquipmentsDetails">{{item.eName}}</span>
						<span class="goods_desc">{{item.eDescription}}</span>
						<span class="goods_price">￥{{item.eRealprice}}</span>
					</div>
				</el-col>
			</el-row>
		</div>
		<div style="height: 20px;background-color: #f4f4f4;"></div>
		<div class="common" style="height: 900px;background-color: #ffffff;">
			<div class="breadcrumb">
				<h3>电池电缆</h3>
				<!-- <el-breadcrumb separator="|" style="font-size: 18px;margin-left: 720px;">
					<el-breadcrumb-item :to="{ path: '/photovoltaic' }">TUP光伏电缆</el-breadcrumb-item>
					<el-breadcrumb-item><a href="/photovoltaic">UL光伏电缆</a></el-breadcrumb-item>
					<el-breadcrumb-item>GF光伏电缆</el-breadcrumb-item>
				</el-breadcrumb> -->
			</div>
			<el-row :gutter="20" style="height: 400px;">
				<el-col :span="12" v-for>
					<div class="imgsize" style="height: 400px;"
						@click="imgToEquipmentsDetails(hotEquipmentsList4[0].imageUrl)">
						<img v-if="hotEquipmentsList4[0].imageUrl" class="indexImg"
							v-model="hotEquipmentsList4[0].imageUrl"
							:src="require('@/assets/equipments/'+hotEquipmentsList4[0].imageUrl)">
						<!-- <img class="indexImg" src="@/assets/equipments/e009.jpg" alt=""> -->
					</div>
				</el-col>
				<div id="area1">
					<div id="area2">
						<el-col :span="12">
							<div class="imgsize" style="height: 192px;margin-bottom: 16px;"
								@click="imgToEquipmentsDetails(hotEquipmentsList4[1].imageUrl)">
								<img v-if="hotEquipmentsList4[1].imageUrl" class="indexImg"
									v-model="hotEquipmentsList4[1].imageUrl"
									:src="require('@/assets/equipments/'+hotEquipmentsList4[1].imageUrl)">

							</div>

						</el-col>
					</div>
					<div id="area3">
						<el-col :span="6">
							<div class="imgsize" style="height: 192px;"
								@click="imgToEquipmentsDetails(hotEquipmentsList4[2].imageUrl)">
								<img v-if="hotEquipmentsList4[2].imageUrl" class="indexImg"
									v-model="hotEquipmentsList4[2].imageUrl"
									:src="require('@/assets/equipments/'+hotEquipmentsList4[2].imageUrl)">

							</div>
						</el-col>
						<el-col :span="6">
							<div class="imgsize" style="height: 192px;"
								@click="imgToEquipmentsDetails(hotEquipmentsList4[3].imageUrl)">
								<img v-if="hotEquipmentsList4[3].imageUrl" class="indexImg"
									v-model="hotEquipmentsList4[3].imageUrl"
									:src="require('@/assets/equipments/'+hotEquipmentsList4[3].imageUrl)">

							</div>
						</el-col>
					</div>
				</div>
			</el-row>
			<el-row :gutter="20" style="height: 400px;">
				<el-col :span="6" v-for="item in hotEquipmentsList2">
					<div class="imgsize" @click="imgToEquipmentsDetails(item.imageUrl)">
						<img v-if="item.imageUrl" class="indexImg" v-model="item.imageUrl"
							:src="require('@/assets/equipments/'+item.imageUrl)">
					</div>
					<div class="brief">
						<span class="goods_name" @click="toEquipmentsDetails">{{item.eName}}</span>
						<span class="goods_desc">{{item.eDescription}}</span>
						<span class="goods_price">￥{{item.eRealprice}}</span>
					</div>
				</el-col>
			</el-row>
		</div>
		<div style="height: 20px;background-color: #f4f4f4;"></div>
		<div class="common" style="height: 900px;background-color: #ffffff;">
			<div class="breadcrumb">
				<h3>热销设备</h3>
				<!-- 	<el-breadcrumb separator="|" style="font-size: 18px;margin-left: 690px;">
					<el-breadcrumb-item :to="{ path: '/photovoltaic' }">笔记本电脑</el-breadcrumb-item>
					<el-breadcrumb-item><a href="/photovoltaic">显示器</a></el-breadcrumb-item>
					<el-breadcrumb-item>平板电脑</el-breadcrumb-item>
					<el-breadcrumb-item>周边配件</el-breadcrumb-item>
				</el-breadcrumb> -->
			</div>
			<el-row :gutter="20" style="height: 400px;">
				<el-col :span="12">
					<div class="imgsize" style="height: 400px;"
						@click="imgToEquipmentsDetails(hotEquipmentsList5[0].imageUrl)">
						<img v-if="hotEquipmentsList5[0].imageUrl" class="indexImg"
							v-model="hotEquipmentsList5[0].imageUrl"
							:src="require('@/assets/equipments/'+hotEquipmentsList5[0].imageUrl)">
						<!-- <img class="indexImg" src="@/assets/equipments/e009.jpg" alt=""> -->
					</div>

				</el-col>
				<div id="area1">
					<div id="area2">
						<el-col :span="12">
							<div class="imgsize" style="height: 192px;margin-bottom: 16px;"
								@click="imgToEquipmentsDetails(hotEquipmentsList5[1].imageUrl)">
								<img v-if="hotEquipmentsList5[1].imageUrl" class="indexImg"
									v-model="hotEquipmentsList5[1].imageUrl"
									:src="require('@/assets/equipments/'+hotEquipmentsList5[1].imageUrl)">
							</div>
						</el-col>
					</div>
					<div id="area3">
						<el-col :span="6">
							<div class="imgsize" style="height: 192px;"
								@click="imgToEquipmentsDetails(hotEquipmentsList5[2].imageUrl)">
								<img v-if="hotEquipmentsList5[2].imageUrl" class="indexImg"
									v-model="hotEquipmentsList5[2].imageUrl"
									:src="require('@/assets/equipments/'+hotEquipmentsList5[2].imageUrl)">
							</div>
						</el-col>
						<el-col :span="6">
							<div class="imgsize" style="height: 192px;"
								@click="imgToEquipmentsDetails(hotEquipmentsList5[3].imageUrl)">
								<img v-if="hotEquipmentsList5[3].imageUrl" class="indexImg"
									v-model="hotEquipmentsList5[3].imageUrl"
									:src="require('@/assets/equipments/'+hotEquipmentsList5[3].imageUrl)">

							</div>
						</el-col>
					</div>
				</div>
			</el-row>
			<el-row :gutter="20" style="height: 400px;">
				<el-col :span="6" v-for="item in hotEquipmentsList3">
					<div class="imgsize" @click="imgToEquipmentsDetails(item.imageUrl)">
						<img v-if="item.imageUrl" class="indexImg" v-model="item.imageUrl"
							:src="require('@/assets/equipments/'+item.imageUrl)">
					</div>
					<div class="brief">
						<span class="goods_name" @click="toEquipmentsDetails">{{item.eName}}</span>
						<span class="goods_desc">{{item.eDescription}}</span>
						<span class="goods_price">￥{{item.eRealprice}}</span>
					</div>
				</el-col>
			</el-row>
		</div>
		<div style="height: 20px;background-color: #f4f4f4;"></div>
		<div class="common" style="height: 500px;background-color: #ffffff;">
			<div class="breadcrumb">
				<h3>变压器</h3>
				<!-- <el-breadcrumb separator="|" style="font-size: 18px;margin-left: 690px;">
					<el-breadcrumb-item :to="{ path: '/photovoltaic' }">电力电缆</el-breadcrumb-item>
					<el-breadcrumb-item><a href="/photovoltaic">电缆附件</a></el-breadcrumb-item>
					<el-breadcrumb-item>电缆接头</el-breadcrumb-item>
					<el-breadcrumb-item>直流电缆</el-breadcrumb-item>
				</el-breadcrumb> -->
			</div>
			<el-row :gutter="20" style="height: 400px;">

				<el-col :span="6" v-for="item in transformerEquipmentsList">
					<div class="imgsize" @click="imgToEquipmentsDetails(item.imageUrl)">
						<img v-if="item.imageUrl" class="indexImg" v-model="item.imageUrl"
							:src="require('@/assets/equipments/'+item.imageUrl)">
					</div>
					<div class="brief">
						<span class="goods_name" @click="toEquipmentsDetails">{{item.eName}}</span>
						<span class="goods_desc">{{item.eDescription}}</span>
						<span class="goods_price">￥{{item.eRealprice}}</span>
					</div>
				</el-col>
			</el-row>
		</div>
		<div style="height: 20px;background-color: #f4f4f4;"></div>
		<div class="common" style="height: 430px;background-color: #ffffff;">
			<div class="breadcrumb">
				<h3>特殊组件</h3>
				<!-- <el-breadcrumb separator="|" style="font-size: 18px;margin-left: 690px;">
					<el-breadcrumb-item :to="{ path: '/photovoltaic' }">层压制品</el-breadcrumb-item>
					<el-breadcrumb-item><a href="/photovoltaic">绝缘漆</a></el-breadcrumb-item>
					<el-breadcrumb-item>阻燃材料</el-breadcrumb-item>
				</el-breadcrumb> -->
			</div>
			<el-row :gutter="20" style="height: 400px;">

				<el-col :span="6" v-for="item in indexEquipmentsList">
					<div class="imgsize" @click="imgToEquipmentsDetails(item.imageUrl)">
						<img v-if="item.imageUrl" class="indexImg" v-model="item.imageUrl"
							:src="require('@/assets/equipments/'+item.imageUrl)">
					</div>
					<div class="brief">
						<span class="goods_name" @click="toEquipmentsDetails">{{item.eName}}</span>
						<span class="goods_desc">{{item.eDescription}}</span>
						<span class="goods_price">￥{{item.eRealprice}}</span>
					</div>
				</el-col>
			</el-row>
		</div>
		<div style="height: 20px;background-color: #f4f4f4;"></div>
		<div class="tuijian" style="background-color: #ffffff;">
			<h3>新闻资讯</h3>
			<el-row :gutter="20" style="margin-top: 10px;">
				<el-col :span="6">
					<div>
						<a href="https://www.sydianlan.net/"><img class="indexImg" src="@/assets/index/ad01.jpg"
								alt=""></a>
					</div>
				</el-col>
				<el-col :span="6">
					<div>
						<a href="https://www.sydianlan.net/"><img class="indexImg" src="@/assets/index/ad02.jpg"
								alt=""></a>
					</div>
				</el-col>
				<el-col :span="6">
					<div>
						<a href="https://www.sydianlan.net/"><img class="indexImg" src="@/assets/index/ad03.jpg"
								alt=""></a>
					</div>
				</el-col>
				<el-col :span="6">
					<div>
						<a href="https://www.sydianlan.net/"><img class="indexImg" src="@/assets/index/ad04.jpg"
								alt=""></a>
					</div>
				</el-col>
			</el-row>
		</div>
	</div>

</template>
<script>
	import request from '@/utils/axios/request.js';
	export default {
		data() {
			return {
				ename: '155W18V 多晶组件',
				edescription: '155W18V 多晶组件',
				eprice: '150',
				imgArray: [
					require('@/assets/lunboImg/01.jpg'),
					require('@/assets/lunboImg/02.jpg'),
					require('@/assets/lunboImg/03.jpg'),
					require('@/assets/lunboImg/04.jpg'),
					// require('../assets/2.png'),
					// require('../assets/3.png'),
					// require('../assets/4.png')
				],
				hotEquipmentsList1: [{
					goodsId: '',
					goodsName: '',
					goodsPrice: '',
					goodsDescription: '',
					goodsImgUrl: '',
				}],
				hotEquipmentsList2: [{
					goodsId: '',
					goodsName: '',
					goodsPrice: '',
					goodsDescription: '',
					goodsImgUrl: '',
				}],
				hotEquipmentsList3: [{
					goodsId: '',
					goodsName: '',
					goodsPrice: '',
					goodsDescription: '',
					goodsImgUrl: '',
				}],
				hotEquipmentsList4: [{
					goodsId: '',
					goodsName: '',
					goodsPrice: '',
					goodsDescription: '',
					goodsImgUrl: '',
				}],
				hotEquipmentsList5: [{
					goodsId: '',
					goodsName: '',
					goodsPrice: '',
					goodsDescription: '',
					goodsImgUrl: '',
				}],
				indexEquipmentsList: [{
					goodsId: '',
					goodsName: '',
					goodsPrice: '',
					goodsDescription: '',
					goodsImgUrl: '',
				}],
				transformerEquipmentsList: [{
					goodsId: '',
					goodsName: '',
					goodsPrice: '',
					goodsDescription: '',
					goodsImgUrl: '',
				}],
			};
		},
		mounted() {
			request({
				method: 'get',
				url: '/equipments/hotEquipmentsList/' + 1
			}).then((res) => {
				// console.log(res)
				this.hotEquipmentsList1 = res.data.data
				// console.log('this.hotEquipmentsList')
				// console.log(this.hotEquipmentsList)
				// console.log('this.hotEquipmentsList')
			})
			request({
				method: 'get',
				url: '/equipments/hotEquipmentsList/' + 2
			}).then((res) => {
				// console.log(res)
				this.hotEquipmentsList2 = res.data.data
				// console.log('this.hotEquipmentsList')
				// console.log(this.hotEquipmentsList)
				// console.log('this.hotEquipmentsList')
			})
			request({
				method: 'get',
				url: '/equipments/hotEquipmentsList/' + 3
			}).then((res) => {
				// console.log(res)
				this.hotEquipmentsList3 = res.data.data
				// console.log('this.hotEquipmentsList')
				// console.log(this.hotEquipmentsList)
				// console.log('this.hotEquipmentsList')
			})
			request({
				method: 'get',
				url: '/equipments/hotEquipmentsList/' + 4
			}).then((res) => {
				// console.log(res)
				this.hotEquipmentsList4 = res.data.data
				// console.log('this.hotEquipmentsList')
				// console.log(this.hotEquipmentsList)
				// console.log('this.hotEquipmentsList')
			})
			request({
				method: 'get',
				url: '/equipments/hotEquipmentsList/' + 5
			}).then((res) => {
				// console.log(res)
				this.hotEquipmentsList5 = res.data.data
				// console.log('this.hotEquipmentsList')
				// console.log(this.hotEquipmentsList)
				// console.log('this.hotEquipmentsList')
			})
			request({
				method: 'get',
				url: '/equipments/indexEquipmentsList'
			}).then((res) => {
				// console.log(res)
				this.indexEquipmentsList = res.data.data
				// console.log('this.indexEquipmentsList')
				// console.log(this.indexEquipmentsList)
				// console.log('this.indexEquipmentsList')
			})
			request({
				method: 'get',
				url: '/equipments/transformerEquipmentsList'
			}).then((res) => {
				// console.log(res)
				this.transformerEquipmentsList = res.data.data
				// console.log('this.transformerEquipmentsList')
				// console.log(this.transformerEquipmentsList)
				// console.log('this.transformerEquipmentsList')
			})
		},
		methods: {
			imgToEquipmentsDetails(e) {
				// console.log(e)
				// this.$cookies.set("imgSearch", e)
				let imgSearch = e
				// console.log(document.cookie)
				this.$router.push({
					path: 'equipmentDetails',
					query: {
						imgSearch: imgSearch
					}
				})
			},
			toEquipmentsDetails(e) {
				let clickSearch = e.target.innerHTML
				// console.log(e.target.innerHTML)
				// this.$cookies.set("clickSearch", e.target.innerHTML)
				// console.log(document.cookie)
				this.$router.push({
					path: 'equipmentDetails',
					query: {
						clickSearch: clickSearch
					}
				})

			},
		}
	}
</script>

<style>
	.goods_price {
		background-color: transparent;
		height: 30px;
		font-size: 28px;
		color: #ff0000;

	}

	.goods_desc {
		width: 300px;
		height: 20px;
		text-align: center;
		color: #393939;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
		margin-bottom: 3px;
	}

	.goods_name {
		height: 28px;
		font-size: 18px;
		margin-bottom: 3px;

	}

	.brief {
		background-color: transparent;
		all: initial;
		height: 93px;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.breadcrumb {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-direction: row;
		text-align: left;
		margin: 0;
		padding: 0;
	}

	.imgsize {
		width: 100%;
		height: 260px;
	}

	.common {
		width: 1240px;
		margin: auto;
		overflow: hidden;
		background-color: #ffffff
	}

	.common h3 {
		height: 60px;
		font-size: 36px;
		font-weight: 400;
		font-style: normal;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-direction: row;
		text-align: left;
		margin: 0;
		padding: 0;

	}



	.indexImg {
		width: 100%;
		height: 100%;
	}

	.tuijian {
		width: 1240px;
		height: 220px;
		margin: 8px auto;
		overflow: hidden;
	}

	.tuijian h3 {
		height: 60px;
		font-size: 36px;
		font-weight: 400;
		font-style: normal;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-direction: row;
		text-align: left;
		margin: 0;
		padding: 0;

	}


	.el-row {
		margin-bottom: 20px;

		&:last-child {
			margin-bottom: 0;
		}
	}

	.el-col {
		border-radius: 4px;

	}


	.grid-content {
		border-radius: 4px;
		min-height: 36px;
	}

	.row-bg {
		padding: 10px 0;
		background-color: #f9fafc;
	}

	.rightImg {
		width: 100%;
		height: 100%;
	}

	.el-carousel__item h3 {
		color: #475669;
		font-size: 14px;
		opacity: 0.75;
		line-height: 150px;
		margin: 0;
	}

	.el-carousel__item:nth-child(2n) {
		background-color: #99a9bf;
	}

	.el-carousel__item:nth-child(2n+1) {
		background-color: #d3dce6;
	}
</style>